<template>
    <div style="overflow:hidden" class="box" :class="{'hide':isShowMenu}">

        <NavTopBar_two  :message="isShowMenu" @hidden="handle"  class="NavTopBar_two"/>
        <div class="content">
            <router-view/>
        </div>
        <bottom  class="bottom"/>
    </div>

   <Search class="search"  @hidden="handle" :message="isShowMenu" :class="{'show':isShowMenu}"/>
</template>
<script setup>
import NavTopBar_two from "@/components/NavTopBar_two/NavTopBar_two.vue";
import Search from "@/components/Search/Search.vue"
import {ref} from "vue";
import Bottom from "@/components/Bottom/Bottom.vue";

let isShowMenu=ref(false)
const handle=(e)=>{
    isShowMenu.value=e
}
</script>
<style lang="scss" scoped>
.NavTopBar_two {
  position: fixed;
  width: 100vw;
  z-index: 9999;
}
.bottom {

    position: fixed;
    bottom: 0;
}
.content {
  padding-top: 40px; /* 确保内容从 `<Main>` 下方开始 */
  //min-height: calc(100vh - 200px); /* 至少与视口高度相等，减去 `<Main>` 的高度 */
    width: 100%;
    height: 100%;
  background-color: #fff; /* 背景颜色 */
  /*position: fixed;*/
  /*z-index: 998;*/
}
.box{
    width: 100vw;
    height: 100vh;
    transform:translateX(0%);
    transition:transform 0.1s;
    &.hide{
        transform: translateX(100%);
    }
}
.search{
    width: 100%;
   height: 100%;
    position: absolute;
    transform: translateX(-100%);
    transition: all 0.1s;
    &.show{
        transform: translateX(0%);
    }
}
</style>